<template>
    <div>
        <!-- <h1>TestComp - {{ score }}</h1> -->
        <!-- <button @click="addScore">子组件调用自己的方法addScore</button> -->
        <h1>TestComp</h1>
        <h2>父传子的数据 - {{ count }}</h2>
        <button @click="handleClick">js获取父传子的数据</button>
    </div>
</template>

<script setup>
/**
 * 子传父
 *  vue2中 子组件 this.$emit('事件名'，参数)  父组件接受自定义事件
 *  vue3语法
 *      1. defineEmits 获取emit函数
 *             const emit = defineEmits参数是个数组，数组里的每一项是个字符串 - 事件名
 *      2. 子组件emit触发事件 传递数据
 *              用前面defineEmits的返回值，emit去触发事件
 *      3. 父组件提供方法
 *      4. 通过自定义事件的方式 注册事件
 * 
 */
import { onUnmounted, ref } from 'vue'
// 如果在js中要获取父组件传过来的数据，那就要写个props变量接受
const props = defineProps({
    count: {
        type: Number,
        required: true
    }
})
const emit = defineEmits(['changeCount'])
const handleClick = () => {
    // console.log(props.count);
    emit('changeCount', props.count + 1)
}
// ref对象 有个value属性
const sfStr = ref('sf')

const score = ref(0)
const a = 0
const sayHi = () => {
    console.log('hello', sfStr.value);
    return 'haha'
}
const addScore = () => {
    score.value++
}
onUnmounted(() => {
    console.log('我噶了');
})
// defineExpose是个函数，里面的参数是个对象，你需要暴露什么属性，对象里就配置这个属性
defineExpose({
    sfStr, // ref对象 有value属性 => 你直接使用这个属性的时候就不需要再点value
    score,
    addScore,
    sayHi,
    a
})
</script>

<style lang="scss" scoped></style>